<template>
  <div class="list-container">
    <div v-if="showAsider" :style="{width: collapse ? '10px' : '17%'}" class="asider-container">
      <slot name="aside"/>
      <el-tooltip :content="collapse ? '展开' : '收起'" effect="dark" placement="right">
        <div class="aside-title" @click="changeCollapse">
          <i :class="collapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'" :title="collapse ? '展开' : '收起'"
             class="icon"/>
        </div>
      </el-tooltip>
    </div>
    <div :class="['content-container', showAsider ? (collapse ? 'min-asider' : 'max-asider' ) : 'no-asider']">
      <div class="search-container">
        <slot name="search"></slot>
      </div>
      <div class="data-container">
        <div class="operate">
          <slot name="operate"></slot>
        </div>
        <div class="content">
          <slot name="content"></slot>
          <slot name="page"></slot>
        </div>
      </div>
    </div>
    <slot/>
  </div>
</template>

<script>
export default {
  name: "ListCard",
  props: {
    collapse: {
      type: Boolean,
      default: false
    },
    showAsider: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    changeCollapse() {
      this.$emit("update:collapse", !this.collapse)
    }
  }
}

</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.list-container {
  width: 100%;
  height: calc(100vh - 90px);

  .asider-container {
    display: inline-block;
    position: relative;
    margin: 8px;
    height: calc(100% - 8px);
    border: 1px solid #e4e7ed;
    padding: 24px 12px;
    border-radius: 4px;
    vertical-align: top;
    background: $base-content-background;;

    .aside-title {
      position: absolute;
      top: calc(50% - 50px);
      right: 0;
      //z-index: 2;
      background: #DCDFE6;
      color: #fff;
      width: 12px;
      height: 100px;
      line-height: 100px;
      cursor: pointer;
      border-radius: 4px;

      &:hover {
        opacity: 0.7;
      }

      .icon {
        font-size: 12px;
      }
    }
  }

  .content-container {
    display: inline-block;
    height: calc(100% - 12px);
    overflow: auto;
  }

  .max-asider {
    width: calc(100% - 17% - 21px);
    margin: 8px auto;
  }

  .min-asider {
    width: calc(100% - 32px - 21px);
    margin: 8px auto;
  }

  .no-asider {
    width: calc(100% - 16px);
    margin: 8px;
  }

  .search-container {
    width: 100%;
    color: #303133;
    padding: 12px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    transition: 0.3s;
    margin-bottom: 12px;
    background: $base-content-background;
    ::v-deep.el-form-item {
      padding: 5px 0;
      margin: auto 5px;

      .el-form-item__label {
        font-size: $base-form-font-size !important;
      }

      .el-form-item__content {
        font-size: $base-content-font-size !important;
      }

      .el-button {
        font-size: $base-button-font-size !important;
      }
    }
  }

  .data-container {
    width: 100%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    color: #303133;
    background: $base-content-background;
    .operate {
      width: 100%;
      padding: 8px 12px;
      display: inline-block;
      border-bottom: 1px solid #e4e7ed;

      .el-button {
        font-size: $base-button-font-size !important;
      }
    }

    .content {
      padding: 12px;

      ::v-deep.el-table {
        .el-table__cell {
          font-size: $base-content-font-size !important;
        }

        .el-button {
          font-size: $base-button-font-size !important;
        }
      }

      ::v-deep.table-expand-description {
        padding: 5px 64px;
        font-size: $base-content-font-size !important;

        .label {
          width: 120px;
          color: #0f0e0e;
          font-size: $base-content-font-size;
        }

        .content {
          width: calc(100% - 120px);
          white-space: normal !important;
          font-size: $base-content-font-size;
        }
      }
    }
  }
}
</style>
